<template>
  <div class="content">
    <el-row>
      <!-- 南丁格尔玫瑰图 -->
      <el-col :span="12">
        <h2>点击量分布（南丁格尔玫瑰图）</h2>
        <div ref="roseChartDom" style="width: 100%; height: 400px;"></div>
      </el-col>
      <!-- 柱状图 -->
      <el-col :span="12">
        <h2>点击量排行（柱状图）</h2>
        <div ref="barChartDom" style="width: 100%; height: 400px;"></div>
      </el-col>
      <!-- 饼状图 -->
      <el-col :span="12">
        <h2>点击量分布（饼状图）</h2>
        <div ref="pieChartDom" style="width: 100%; height: 400px;"></div>
      </el-col>
      <!-- 大数据量面积图 -->
      <el-col :span="12">
        <h2>点击量大数据量面积图</h2>
        <div ref="areaChartDom" style="width: 100%; height: 400px;"></div>
      </el-col>
      <!-- K 线图 -->
      <el-col :span="12">
        <h2>点击量 K 线图</h2>
        <div ref="klineChartDom" style="width: 100%; height: 400px;"></div>
      </el-col>

    </el-row>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
import { getViewData } from '@/api/view';

// 使用 ref 来存储获取的数据
const viewData = ref(null);
const isLoading = ref(false);
const error = ref(null);

// 定义各图表的 ref
const barChartDom = ref(null);
const pieChartDom = ref(null);
const areaChartDom = ref(null);
const klineChartDom = ref(null);
// 新增南丁格尔玫瑰图的 ref
const roseChartDom = ref(null);

const fetchViewData = async () => {
  isLoading.value = true;
  error.value = null;
  try {
    const data = await getViewData();
    viewData.value = data;
  } catch (err) {
    error.value = err;
  } finally {
    isLoading.value = false;
  }
};

// 组件挂载时发起请求并初始化图表
onMounted(async () => {
  await fetchViewData();
  if (
      barChartDom.value &&
      pieChartDom.value &&
      areaChartDom.value &&
      klineChartDom.value &&
      roseChartDom.value &&
      viewData.value &&
      viewData.value.users
  ) {
    // 提取数据
    const xAxisData = viewData.value.users.map(item => item.Name);
    const seriesData = viewData.value.users.map(item => item.Hit);
    const pieData = viewData.value.users.map(item => ({
      name: item.Name,
      value: item.Hit
    }));

    // 转换数据为 K 线图所需格式
    const klineData = seriesData.map((hit) => [hit, hit, hit, hit]);

    // 柱状图配置
    const barOption = {
      title: { text: '点击量排行' },
      xAxis: { data: xAxisData },
      yAxis: {},
      series: [{ type: 'bar', data: seriesData }]
    };

    // 饼状图配置
    const pieOption = {
      title: {
        text: '点击量分布',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '点击量',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 大数据量面积图配置
    const areaOption = {
      title: { text: '点击量大数据量面积图' },
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '点击量',
          type: 'line',
          data: seriesData,
          areaStyle: {},
          large: true,
          progressive: 1000
        }
      ]
    };

    // K 线图配置
    const klineOption = {
      title: { text: '点击量 K 线图' },
      xAxis: {
        type: 'category',
        data: xAxisData
      },
      yAxis: {
        scale: true
      },
      series: [
        {
          name: '点击量',
          type: 'candlestick',
          data: klineData
        }
      ]
    };

    // 南丁格尔玫瑰图配置
    const roseOption = {
      title: {
        text: '点击量分布（南丁格尔玫瑰图）',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '点击量',
          type: 'pie',
          radius: ['10%', '70%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    // 初始化并设置柱状图
    const barChart = echarts.init(barChartDom.value);
    barChart.setOption(barOption);

    // 初始化并设置饼状图
    const pieChart = echarts.init(pieChartDom.value);
    pieChart.setOption(pieOption);

    // 初始化并设置大数据量面积图
    const areaChart = echarts.init(areaChartDom.value);
    areaChart.setOption(areaOption);

    // 初始化并设置 K 线图
    const klineChart = echarts.init(klineChartDom.value);
    klineChart.setOption(klineOption);

    // 初始化并设置南丁格尔玫瑰图
    const roseChart = echarts.init(roseChartDom.value);
    roseChart.setOption(roseOption);
  }
});
</script>
<style>
</style>